<template>
    <echartHomeItem :echartData="echartData" type="2"></echartHomeItem>
    <view class="box-total">
        <view class="count">{{ qpjfTotalCount }}</view>
        <view class="title">切坡建房户数</view>
    </view>
    <uv-line></uv-line>
    <!-- 左边标题分栏 -->
    <view class="df jsb ac mx-30 my-20">
        <view class="box-left">地区排名</view>
    </view>
    <uv-list>
        <uv-list-item :title="item.AdminName" link clickable border @click="townClick(item)"
            v-for="(item, index) in apiSortData" :key="index">
            <template #header>
                <view class="sortnum" :class="'sortnum' + index">
                    {{ index + 1 }}
                </view>
            </template>
            <template #footer>
                <view>{{ item.QpjfCount }}（户）</view>
            </template>
        </uv-list-item>
    </uv-list>
</template>

<script lang="ts" setup>
import { GetQpjfTownStats_API } from '@/server/home';
import echartHomeItem from './components/echart-home-item.vue';
const apiSortData = ref([]);
const qpjfTotalCount = ref(0);
const echartData = ref('');
const getTowns = async () => {
    const res = await GetQpjfTownStats_API();
    if (res.IsSuccess) {
        const arr = res.Data; //apiResult.getDisasterMap; //dsq test
        apiSortData.value = arr.sort((a, b) => b.QpjfCount - a.QpjfCount);
        qpjfTotalCount.value = arr
            .map((item) => item.QpjfCount)
            .reduce((total, num) => total + num);
        const data = arr.map((el) => {
            return {
                name: el.AdminName,
                code: el.AdminCode,
                value: el.QpjfCount,
            }
        });
        echartData.value = JSON.stringify(data);
    }
};
onLoad(() => {
    getTowns();
});

const townClick = (val) => {
    uni.navigateTo({
        url: `/pages/home/town/qpjf-list?adcode=${val.AdminCode}`,
    })
}

</script>

<style lang="scss" scoped>
.box-total {
    text-align: center;
    background: #f8fafd;
    padding: 10rpx 0;
    margin: 10rpx 0;
    border-radius: 40rpx;

    .count {
        font-size: 48rpx;
        line-height: normal;
        font-weight: bold;
        color: #2196f3;
    }

    .title {
        font-size: 32rpx;
        line-height: normal;
        color: #2196f3;
    }
}

.sortnum {
    background: #cccccc;
    border-radius: 36rpx;
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
    text-align: center;
    line-height: 36rpx;
    margin: auto 10rpx auto 0px;
    font-size: 24rpx;
}

.sortnum0 {
    background-color: red;
}

.sortnum1 {
    background-color: orange;
}

.sortnum2 {
    background-color: yellow;
}
</style>
